<template>
	<view class="columnY container">
		<view class="login-center">
			<view class="pad-top-60 pad-bottom-30  centerY centerX">
				<image class="logo" src="@/static/image/logo.png" mode=""></image>
			</view>
			<view class="radius20 form-box pad-30">
				<view class="text-center font-40 mar-bottom-40">消防学习平台</view>
			
				<u--form class="mar-top-30" labelPosition="left" :model="userInfo" ref="form1">
					<u-form-item prop="username" borderBottom="true">
						<u--input type="text" clearable placeholder="请输入账号"
							v-model="userInfo.username" border="none"></u--input>
					</u-form-item>
					<u-form-item prop="password" class="mar-top-40" borderBottom="true">
						<u-input clearable :type="showPassword ? 'text' :'password'"
							placeholder="请输入密码" v-model="userInfo.password" border="none">
							<template #suffix>
								<u-icon color="#888888" size="20" class="icon" @click="changePassword"
									:name="showPassword ? 'eye-fill' : 'eye-off'"></u-icon>
							</template>
						</u-input>
					</u-form-item>
				</u--form>
				<!-- <view class="text-right color-main font-26 mar-top-10">忘记密码</view> -->
			</view>
		</view>
		<view class="login-buttom pad-30">
			<view @click="hanldeRegister" class="mar-top-5 font-24 text-center">没有账号<text class="color-main">去注册</text>
			</view>
			<u-button class="font-32 mar-top-10 bg-main" shape="circle" color="#edad14" @click="submit">登陆</u-button>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	// 接口引入
	import {
		login
	} from '/config/api.js';
	import { toast } from '@/uni_modules/uview-plus'
	let userInfo = reactive({
		username: '',
		password: ''
	})

	// 登录
	const submit = () => {
		login(userInfo).then(res=>{
			toast(res.msg);
			uni.setStorageSync('token',res.data.u_token);
			
			setTimeout(()=>{
				uni.switchTab({
					url: '/pages/index/index'
				})
			},300)
		})
	}

	// 跳转注册
	const hanldeRegister = () => {
		uni.navigateTo({
			url: '/pages/register/register'
		})
	}

	// 查看密码
	let showPassword = ref(false);
	const changePassword = () => {
		showPassword.value = !showPassword.value;
	}

	const hanldeChoice = () => {
		uni.navigateTo({
			url: '/pages/locale/locale'
		})
	}
</script>

<style scoped>
	.container {
		height: calc(100vh - 100rpx);
		position: relative;
	}

	.choice {
		position: fixed;
		right: 30rpx;
		top: 40rpx;
	}

	.login-center {
		flex-grow: 1;
		background: white;
	}

	.logo {
		width: 180rpx;
		height: 180rpx;
	}

	.form-box {
		position: relative;
		background: white;
	}

	.login-buttom {
		background: white;
	}
</style>